<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="">
    <meta name="author" content="">

    <title>Hungry? Come Here!</title>

	<link href="../css/bootstrap.min.css" rel="stylesheet" >
	<link href="../css/style.css" rel="stylesheet" >
	<link href="../css/user.css" rel="stylesheet" >
	<link href="../css/ui-lightness/jquery-ui-1.10.3.custom.css" rel="stylesheet">
</head>
<body>
<script type="text/javascript" src = "../js/jquery.js"></script>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<script type="text/javascript" src = "../js/twitterWidget.js"></script>
<script type="text/javascript" src = "../js/jquery.bgswitcher.js"></script>
<script type="text/javascript" src = "../js/bgswitcher.jquery.js"></script>
<script type="text/javascript" src = "../js/placeOrder.js"></script>
<script type="text/javascript" src = "../js/cancellOrder.js"></script>
<script type="text/javascript" src = "../js/editOrders.js"></script>
<script type="text/javascript" src="../js/jquery-ui-1.10.3.custom.min.js"></script>
<script type="text/javascript" src = "../js/searchResults.js"></script>
<script type="text/javascript" src = "../js/sort.js"></script>

<div class = "navbar navbar-inverse navbar-static-top">
	<div class = "container">
		<a href="index.html" class = "navbar-brand">Hungry? Come Here!</a>

		<div class = "collapse navbar-collapse navHeaderCollapse">
			<ul class = "nav navbar-nav navbar-right">
				<li><a href="index.html">Home</a></li>
				<li class = "dropdown">
					<a class = "dropdown-toggle" data-toggle = "dropdown" href="#">Share<b class = "caret"></b></a>
					<ul class = "dropdown-menu">
						<li><a href="https://twitter.com/share" class="twitter-share-button" data-lang="en">Tweet</a></li>
						<li><a href="#" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent(location.href), 'facebook-share-dialog', 'width=626,height=436'); return false;">Facebook</a></li>
					</ul>
				</li>
				<li><a href="register.html">Register</a></li>
				<li id = "loginRep" class = "active dropdown"><a href="#login" data-toggle = "modal">Log In</a></li>
			</ul>
		</div>
	</div>
</div>

<div class = "container">
	<div class = "jumbotron header">
		<h2>Welcome to <strong>Hungry? Come Here!</strong></h2>
		<p></p>
	</div>
	<script type="text/javascript">
	$(".header").bgswitcher({
		images: ["../img/header/img_1_2.jpg","../img/header/img_2_2.jpg","../img/header/img_3_2.png","../img/header/img_4.jpg"],
		loop:true,
		shuffle:true,
		duration:1000
	});
	</script>
</div>

<div class = "container">
	<div class = "row">
		<div class = "col-md-9" id = "results">
			<div id = "restIntroduction">
				<div class = "container col-md-11">
					<div class = "userInfor row jumbotron"></div>
					<div class = "userOrders row jumbotron"></div>
				</div>
				<script type="text/javascript" src= "../js/cookies.js"></script>
				<script type="text/javascript" src = "../js/users.js"></script>
					<script type="text/javascript">
					$(document).ready(function(){
						var userNames = getCookies();
						var len = userNames.length;
						userNames = userNames.substring(0,len-2);

						$.post("http://localhost/cs2102/src/getInfo.php",
						{
							"name":userNames
						},
						function(dataJson,status){
							var len = dataJson.length;
							var dat = $.parseJSON(dataJson.substring(1,len-1));
							var name = dat["name"];
							var address = dat["address"];
							var mobileNumber = dat["mobile_number"];
							var email = dat["email"];
							var orders = new Array();

							$.post("http://localhost/cs2102/src/getOrder.php",
							{
								"email": email
							},
							function(dataJson2, status){

								var indexStart = 1;
								var indexEnd = dataJson2.indexOf("}")+1;
								var order;
								var counter = 0;

								while(indexEnd > 0){
									order = dataJson2.substring(indexStart,indexEnd);
									dataJson2 = dataJson2.substring(indexEnd);
									indexEnd = dataJson2.indexOf("}")+1;
									orders[counter] = $.parseJSON(order);
									counter++;
								}

								var userOrders = getUserOrders(orders);
								$(".userOrders").html(userOrders);
							});

							var userInfo = getUserInformation(name,address,mobileNumber);
							$(".userInfor").html(userInfo);		
						})
					});
					</script>
			</div>
		</div>

		<div class ="col-md-3" id = "sidebar">
			<div id = "searchPanel" class = "row">
				<form role="form">
				<div class = "form-group">
					<label>Restaurant Name:</label>
					<input type="text" class="form-control" id="searchName" placeholder="Restaurent">
				</div>
				<div class="form-group">
				    <label>Cuisines</label>
				    <select id = "searchCuisines" name = "cuisines" class = "form-control" value = "">
				    <option value = "">All Cuisines</option>
				    <option value = "Chinese">Chinese</option>
				    <option value = "Indian">Indian</option>
				    <option value = "Japanese">Japanese</option>
				    <option value = "Western">Western</option>
				    </select>
			  	</div>
			  	<div class = "form-group">
			  		<label>Average Consumption</label>
			  		<select id = "avgcom" name = "avgcom" class = "form-control" value = "0">
				    <option value = "0">All Prices</option>
				    <option value = "1">$0-$30</option>
				    <option value = "2">$30-$50</option>
				    <option value = "3">$50-$100</option>
				    <option value = "4">over $100</option>
				    </select>
			  	</div>
			  	<input type = "submit" value = "search" class = "submitSearch form-control" id = "searchBtn">
				</form>
				<script type="text/javascript" src = "../js/searchResults.js"></script>
			</div>

			<hr />

			<div id = "highlightPanel" class = "row">
				<div class = "navbar navbar-default row" id = "hightlightHeader">
					<div class = "container navbar-brand">
						<h4><strong>Today's Highlight</strong></h4>
					</div>
				</div>

				<div id = "highlights row">
					
				</div>
			</div>
		</div>
	</div>

	<div class = "modal fade" id = "login loginModal" role = "dialog">
		<div class = "modal-dialog" id = "loginModalIndex">
			<div class = "modal-content">
				<div class = "modal-header">
					<h4>User Log In</h4>
				</div>
				<div class = "modal-body" id = "login_modal">
					<form role = "form">
						<div class = "form-group">
							<label>Email:</label>
							<input type="text" class="form-control" id="logInEmail" placeholder="Enter email" name = "email">
						</div>
						<div class="form-group">
					    <label>Password</label>
					    <input type="password" class="form-control" id="logInPassword" placeholder="Password" name = "password">
				  		</div>
				  		
				  		<div>
				  		<button class = "btn btn-primary" id = "loginBtn">Log In</button>
				  		</div>
				  		<script type="text/javascript" src="../js/login.js"></script>
				  		<script type="text/javascript" src="../js/cookies.js"></script>
				  		<script type="text/javascript">
				  		function logout(){
				  			setCookies("");
				  			var logoutHtml = "<a href = \"#login\" data-toggle = \"modal\">Log In</a>";
				  			$("#loginRep").html(logoutHtml);
				  		}

				  		$(function(){
				  			$("#loginBtn").click(function(events){
				  				events.preventDefault();
				  				var userEmail = $("#logInEmail").val();
				  				var userPassword = $("#logInPassword").val();
				  				if(userEmail.length == 0 || userEmail == null){
				  					alert("User Email cannot be EMPTY");
				  				}else if(userEmail.indexOf("@") < 1){
				  					alert("Invalid Email Address");
				  				}else if(userPassword.length == 0 || userPassword == null){
				  					alert("Password cannot be EMPTY");
				  				}else{
							  		$.post("http://localhost/cs2102/src/login.php", 
							  		{
							  			email: userEmail,
							  			password: userPassword
							  		},
							  		function(data,status){
							  			var userName = data;

							  			var userLinkHtml = "<a class = \"dropdown-toggle\" data-toggle = \"dropdown\" href = \"#\">"+userName+"<b class = \"caret\"></b></a>";
							  			userLinkHtml += "<ul class = \"dropdown-menu\">";
							  			userLinkHtml += "<li><a href = \"user.html\">"+userName+"</a></li>";
							  			userLinkHtml += "<li><a href=\"#\" onclick=\"logout()\">log out</a></li></ul>";

							  			setCookies(userName);
							  			$(function(){
							  				$("#login").modal('hide');
							  				if(data.length != 2){
							  					$("#loginRep").html(userLinkHtml);
							  				}else{
							  					alert("Log in fail due to invalid username or password. Please try again.")
							  				}
							  			});
							  		});
							  	}
						  	});
					  	});
				  		</script>
					</form>
				</div>
			</div>
		</div>
	</div>
</div>
</body>
</html>